<template>
    <!--    {{xxx}}差值表达式
    (1)、xxx：可以自动读取到setup中的所有属性 name、age
    (2)、xxx：method调用的返回值
    (3)、js表达式，必须有返回结果，例如1+1

    注意区分：js表达式 和 js代码(语句)
    1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
        (1). a
        (2). a+b
        (3). demo(1)
        (4). x === y ? 'a' : 'b'
    2.js代码(语句)
        (1). if(){}
        (2). for(){}
    -->
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <h2>年龄：{{ ++age}}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>

<!--<script>
    export default {
        name: 'Person',
        setup() {
            console.log(this) //setup中的this是undefined，Vue3在弱化this了
            // 数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据
            let name = '张三'
            let age = 18
            let tel = '13888888888'

            // 方法
            function changeName() {
                name = 'zhang-san' //注意：这样修改name，页面是没有变化的
                console.log(name) //name确实改了，但name不是响应式的
            }

            function changeAge() {
                age += 1 //注意：这样修改age，页面是没有变化的
                console.log(age) //age确实改了，但age不是响应式的
            }

            // 将数据、方法交出去，模板中才可以使用
            return {name, age, changeName, changeAge}
        }
    }
</script>-->

<script setup name="Person">
    // 数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据
    let name = '张三'
    let age = 18

    // 方法
    function changeName() {
        name = 'zhang-san' //注意：这样修改name，页面是没有变化的
        console.log(name) //name确实改了，但name不是响应式的
    }

    function changeAge() {
        age += 1 //注意：这样修改age，页面是没有变化的
        console.log(age) //age确实改了，但age不是响应式的
    }
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 5px;
    }
</style>